<div id="map_canvas_parent_dom" style="width: 100%; height: 100%; flex: 1; overflow: hidden;" tabindex="-1">
    <canvas id="map_canvas_dom" #map_canvas style="width: 100%; height: 100%; display: block; background-color: #87CEEB;"></canvas>
</div>

<p-drawer header="当前位置有{{nearby_track_lines.length}}条轨迹，请选择其中一个：" [(visible)]="show_track_line_select" position="right" 
        [style]="{'width': '40rem', 'white-space': 'nowrap'}">
    <div class="p-d-flex p-flex-column">
        @for (track_line of nearby_track_lines; track track_line.uuid) {
            <div class="p-d-flex p-ai-center p-mt-2" style="cursor: pointer;" (click)="show_track_line_select = false; select_track_line(track_line.uuid)">
                <img src="{{track_line.thumbnail}}">
                <span class="p-ml-2">{{track_line.label}}</span>
            </div>
        }
    </div>
</p-drawer>

<p-contextmenu #context_menu [model]="context_menu_items" appendTo="body" baseZIndex="999999">
</p-contextmenu>

<p-drawer header="轨迹参数编辑" [(visible)]="show_track_line_edit" position="right" 
        [style]="{'width': '40rem', 'white-space': 'nowrap'}">
    @if (!!global_data.user_data.selected) {
        <div class="p-d-flex p-flex-column">
            <div class="p-d-flex p-ai-center p-mt-3">
                <div>
                    轨迹名称：
                </div>
                <div class="p-ml-3" style="width: 100%;">
                    <input type="text" pInputText fluid="true" [(ngModel)]="global_data.user_data.selected.label" [invalid]="!global_data.user_data.selected.label" />
                </div>
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <div>
                    线条宽度：
                </div>
                <div class="p-ml-3">
                    <p-inputnumber [(ngModel)]="global_data.user_data.selected.width" showButtons="true" [min]="1" [max]="10" 
                        (onInput)="repaint(); global_data.track_info.refresh(); global_data.track_chart.refresh()" />
                </div>
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <div>
                    线条颜色：
                </div>
                <div class="p-ml-3">
                    <p-colorpicker [(ngModel)]="track_line_color" (onChange)="change_track_line_color()" />
                </div>
            </div>
            <div class="p-d-flex p-ai-center p-mt-5">
                <div>
                    显示端点：
                </div>
                <div class="p-ml-3">
                    <p-checkbox [(ngModel)]="global_data.user_data.selected.draw_endpoints" [binary]="true"  
                        (onChange)="repaint(); global_data.track_info.refresh(); global_data.track_chart.refresh()" />
                </div>
            </div>
        </div>        
    }
</p-drawer>

<p-drawer [(visible)]="show_big_photo" position="right" 
        [style]="{'width': '60%'}">
    @if (!!global_data.selected_photo) {
        <img src="{{global_data.selected_photo.url}}" style="max-width: 100%; max-height: 100%;" />
    }
</p-drawer>

<p-confirmdialog />
<p-toast />

